<template>
    <div class="allBg">
        <el-container>
            <el-header class="header">验证码登录</el-header>
            <el-main>
                <el-input v-model="username" class="username" maxlength="11" placeholder="请输入手机号" clearable></el-input>

                <div class="otpCode">
                    <el-input v-model="otpCode" placeholder="请输入验证码" maxlength="6" clearable>
                        <template slot="append">
                            <el-button id="getOtpCodeButton" @click="getOtpCode()">{{com_timeoutDes}}</el-button>
                        </template>
                    </el-input>
                </div>

                <el-row>
                    <el-button class="loginPassword" type="text" @click="goTo('Login')">密码方式登录</el-button>
                </el-row>

                <el-row class="login-row">
                    <el-button @click="doLogin()" class="login" type="primary">登录</el-button>
                </el-row>
            </el-main>

            <el-footer></el-footer>
        </el-container>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                username: "",
                otpCode: "",
                com_timeoutDes: "获取验证码",
                com_timeoutFlg: true,
            };
        },
        methods: {
            goTo(pageName) {
                this.$router.push("/" + pageName);
            },
            doLogin() {
                if (
                    this.$common.isBlank(this.username) ||
                    this.$common.isBlank(this.otpCode)
                ) {
                    this.$common.msg("手机号和短信验证码都不能为空");
                }
            },
            getOtpCode() {
                if (this.$common.isBlank(this.username)) {
                    this.$common.msg("请输入手机号");
                    return;
                }
                this.$common.timeout(this, 60);
            }

        }
    };
</script>

<style>
    .username {
        margin-top: 100px;
        width: 80% !important;
        font-size: 16px;
    }

    .username input {
        height: 60px !important;
    }

    .otpCode {
        margin: 0 auto;
        margin-top: 10px;
        width: 80% !important;
        font-size: 16px;
    }

    .otpCode input {
        height: 60px !important;
    }

    .otpCode button {
        padding-left: 10px;
        padding-right: 10px;
    }

    .loginPassword {
        margin-top: 10px;
        font-size: 18px;
        color: #ecd3d3;
    }

    .login {
        margin-top: 10px;
        font-size: 16px;
        padding: 12px 30px;
    }
</style>
